<template>
  <div id="homePage" class="modern-homepage" ref="homePageRef">
    <!-- 英雄区域 -->
    <div 
      class="hero-section"
      v-motion
      :initial="{ opacity: 0, y: 50 }"
      :enter="{ opacity: 1, y: 0, transition: { duration: 800, ease: 'easeOut' } }"
    >
      <div class="hero-content">
        <h1 
          class="hero-title gradient-text"
          v-motion
          :initial="{ opacity: 0, y: 30 }"
          :enter="{ opacity: 1, y: 0, transition: { duration: 600, delay: 200 } }"
        >
          探索无限创意
        </h1>
        <p 
          class="hero-subtitle"
          v-motion
          :initial="{ opacity: 0, y: 20 }"
          :enter="{ opacity: 1, y: 0, transition: { duration: 600, delay: 400 } }"
        >
          在海量精美图片中发现灵感，让每一次搜索都充满惊喜
        </p>
        
        <!-- 高级搜索框 -->
        <div 
          class="search-container"
          v-motion
          :initial="{ opacity: 0, y: 20, scale: 0.95 }"
          :enter="{ opacity: 1, y: 0, scale: 1, transition: { duration: 600, delay: 600 } }"
        >
          <div class="search-box glass">
            <div class="search-input-wrapper">
              <div class="search-icon">
                <SearchOutlined />
              </div>
              <input
                ref="searchInputRef"
                v-model="searchParams.searchText"
                class="search-input"
                placeholder="搜索图片、标签、分类..."
                @keydown.enter="doSearch"
              />
              <div class="search-loading" v-if="loading">
                <LoadingOutlined class="loading-icon" />
              </div>
            </div>
            <button class="search-btn" @click="doSearch">
              <span>搜索</span>
            </button>
          </div>
          
        </div>

        <!-- 快速筛选 -->
        <div 
          class="quick-filters"
          v-motion
          :initial="{ opacity: 0, y: 20 }"
          :enter="{ opacity: 1, y: 0, transition: { duration: 600, delay: 800 } }"
        >
          <span class="filter-label">热门搜索：</span>
          <div class="filter-tags">
            <span 
              v-for="hotTag in hotTags" 
              :key="hotTag"
              class="hot-tag"
              @click="searchByTag(hotTag)"
            >
              {{ hotTag }}
            </span>
          </div>
        </div>
      </div>
    </div>

    <!-- 筛选区域 -->
    <div 
      class="filter-section"
      v-motion
      :initial="{ opacity: 0, y: 30 }"
      :enter="{ opacity: 1, y: 0, transition: { duration: 600, delay: 1000 } }"
    >
      <!-- 分类筛选 -->
      <div class="category-filter">
        <h3 class="filter-title">
          <AppstoreOutlined />
          <span>分类</span>
        </h3>
        <div class="category-tabs">
          <div 
            v-for="(category, index) in categoryOptions" 
            :key="category.key"
            class="category-tab"
            :class="{ active: selectedCategory === category.key }"
            @click="selectCategory(category.key)"
            v-motion
            :initial="{ opacity: 0, x: -20 }"
            :enter="{ 
              opacity: 1, 
              x: 0, 
              transition: { 
                duration: 400, 
                delay: 1100 + index * 100 
              } 
            }"
          >
            <component :is="category.icon" class="category-icon" />
            <span class="category-label">{{ category.label }}</span>
            <div class="category-count">{{ category.count || 0 }}</div>
          </div>
        </div>
      </div>

      <!-- 标签筛选 -->
      <div class="tag-filter">
        <h3 class="filter-title">
          <TagsOutlined />
          <span>标签</span>
          <button class="clear-tags" @click="clearTags" v-if="hasSelectedTags">
            清除
          </button>
        </h3>
        <div class="tag-cloud">
          <div 
          v-for="(tag, index) in tagList"
          :key="tag"
            class="tag-item"
            :class="{ 
              selected: selectedTagList[index],
              'size-large': index < 3,
              'size-medium': index >= 3 && index < 8,
              'size-small': index >= 8
            }"
            @click="toggleTag(index)"
            v-motion
            :initial="{ opacity: 0, scale: 0.8 }"
            :enter="{ 
              opacity: 1, 
              scale: 1, 
              transition: { 
                duration: 300, 
                delay: 1300 + index * 50,
                ease: 'backOut' 
              } 
            }"
          >
            <span class="tag-text">{{ tag }}</span>
            <div class="tag-glow"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 统计信息 -->
    <div 
      class="stats-section"
      v-motion
      :initial="{ opacity: 0, y: 20 }"
      :enter="{ opacity: 1, y: 0, transition: { duration: 600, delay: 1500 } }"
    >
      <div class="stats-container">
        <div class="stat-item">
          <div class="stat-number">{{ formatNumber(total) }}</div>
          <div class="stat-label">张图片</div>
        </div>
        <div class="stat-item">
          <div class="stat-number">{{ categoryList.length }}</div>
          <div class="stat-label">个分类</div>
        </div>
        <div class="stat-item">
          <div class="stat-number">{{ tagList.length }}</div>
          <div class="stat-label">个标签</div>
        </div>
        <div class="stat-item">
          <div class="stat-number">{{ formatNumber((searchParams.pageSize || 10) * (searchParams.current || 1)) }}</div>
          <div class="stat-label">已加载</div>
        </div>
      </div>
    </div>

    <!-- 图片列表区域 -->
    <div 
      class="content-section"
      v-motion
      :initial="{ opacity: 0, y: 30 }"
      :enter="{ opacity: 1, y: 0, transition: { duration: 600, delay: 1700 } }"
    >
      <div class="content-header">
        <h2 class="content-title">
          <span>精选图片</span>
          <div class="title-decoration"></div>
        </h2>
        <div class="view-controls">
          <button 
            class="view-btn"
            :class="{ active: viewMode === 'grid' }"
            @click="setViewMode('grid')"
            title="网格视图"
          >
            <AppstoreOutlined />
          </button>
          <button 
            class="view-btn"
            :class="{ active: viewMode === 'list' }"
            @click="setViewMode('list')"
            title="列表视图"
          >
            <BarsOutlined />
          </button>
          <button 
            class="view-btn"
            :class="{ active: viewMode === 'masonry' }"
            @click="setViewMode('masonry')"
            title="瀑布流"
          >
            <LayoutOutlined />
          </button>
        </div>
      </div>

      <!-- 加载状态 -->
      <div v-if="loading && dataList.length === 0" class="loading-container">
        <div class="loading-content">
          <div class="loading-spinner"></div>
          <p class="loading-text">正在加载精美图片...</p>
        </div>
      </div>

    <!-- 图片列表 -->
      <PictureList 
        v-else
        :dataList="dataList" 
        :loading="loading" 
        :viewMode="viewMode"
        :canEdit="canEditPicture"
        :canDelete="canDeletePicture"
        :onReload="fetchData"
        class="homepage-picture-list"
      />

    <!-- 分页 -->
      <div 
        class="pagination-container"
        v-if="dataList.length > 0"
        v-motion
        :initial="{ opacity: 0, y: 20 }"
        :enter="{ opacity: 1, y: 0, transition: { duration: 500, delay: 200 } }"
      >
    <a-pagination
      v-model:current="searchParams.current"
      v-model:pageSize="searchParams.pageSize"
      :total="total"
          :showSizeChanger="true"
          :showQuickJumper="true"
          :pageSizeOptions="['10', '20', '50']"
          :showTotal="(total: number, range: [number, number]) => `第 ${range[0]}-${range[1]} 条，共 ${total} 条`"
      @change="onPageChange"
          @showSizeChange="onPageSizeChange"
        />
      </div>

      <!-- 空状态 -->
      <div v-if="!loading && dataList.length === 0" class="empty-state">
        <div class="empty-content">
          <PictureOutlined class="empty-icon" />
          <h3 class="empty-title">暂无图片</h3>
          <p class="empty-text">
            <span v-if="hasActiveFilters">未找到符合条件的图片，</span>
            <span v-else>还没有图片，</span>
            <a @click="goToUpload" class="upload-link">立即上传</a>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, computed, nextTick } from 'vue'
import { useMobileGestures } from '@/composables/useMobileGestures'
import {
  SearchOutlined,
  LoadingOutlined,
  AppstoreOutlined,
  TagsOutlined,
  BarsOutlined,
  LayoutOutlined,
  PictureOutlined
} from '@ant-design/icons-vue'
import {
  listPictureTagCategoryUsingGet,
  listPictureVoByPageUsingPost,
} from '@/api/pictureController.ts'
import { message } from 'ant-design-vue'
import PictureList from '@/components/PictureList.vue'
import { useRouter } from 'vue-router'
import { gsap } from 'gsap'
import { useLoginUserStore } from '@/stores/useLoginUserStore'

const router = useRouter()
const loginUserStore = useLoginUserStore()

// 权限检查 - 管理员在公共图库中的权限
const canEditPicture = computed(() => {
  return loginUserStore.loginUser?.userRole === 'admin'
})

const canDeletePicture = computed(() => {
  return loginUserStore.loginUser?.userRole === 'admin'
})

// 基础数据
const dataList = ref<API.PictureVO[]>([])
const total = ref(0)
const loading = ref(true)

// UI状态
const viewMode = ref('grid')
const searchInputRef = ref<HTMLInputElement>()

// 搜索条件
const searchParams = reactive<API.PictureQueryRequest>({
  current: 1,
  pageSize: parseInt(localStorage.getItem('homepage-pageSize') || '10'),
  sortField: 'createTime',
  sortOrder: 'descend',
})


// 热门标签 - 从后端获取的标签中选择一部分作为热门推荐
const hotTags = computed(() => {
  // 取前8个标签作为热门推荐，如果不足8个则显示全部
  return tagList.value.slice(0, Math.min(8, tagList.value.length))
})

// 获取数据
const fetchData = async () => {
  loading.value = true
  // 转换搜索参数
  const params = {
    ...searchParams,
    tags: [] as string[],
  }
  if (selectedCategory.value !== 'all') {
    params.category = selectedCategory.value
  }
  // [true, false, false] => ['java']
  selectedTagList.value.forEach((useTag, index) => {
    if (useTag) {
      params.tags.push(tagList.value[index])
    }
  })
  const res = await listPictureVoByPageUsingPost(params)
  if (res.data.code === 0 && res.data.data) {
    dataList.value = res.data.data.records ?? []
    total.value = res.data.data.total ?? 0
  } else {
    message.error('获取数据失败，' + res.data.message)
  }
  loading.value = false
}

// 页面加载时获取数据，请求一次
onMounted(() => {
  fetchData()
})

// 分页参数
const onPageChange = (page: number, pageSize: number) => {
  searchParams.current = page
  if (pageSize !== searchParams.pageSize) {
    // 当pageSize改变时，保存到localStorage
    localStorage.setItem('homepage-pageSize', pageSize.toString())
  }
  searchParams.pageSize = pageSize
  fetchData()
}

// 搜索
const doSearch = () => {
  // 重置搜索条件
  searchParams.current = 1
  fetchData()
}

// 标签和分类列表
const categoryList = ref<string[]>([])
const selectedCategory = ref<string>('all')
const tagList = ref<string[]>([])
const selectedTagList = ref<boolean[]>([])

// 计算属性
const categoryOptions = computed(() => {
  const options = [
    { key: 'all', label: '全部', icon: AppstoreOutlined, count: total.value }
  ]
  
  categoryList.value.forEach(category => {
    options.push({
      key: category,
      label: category,
      icon: PictureOutlined,
      count: Math.floor(Math.random() * 50) + 10 // 模拟数量
    })
  })
  
  return options
})

const hasSelectedTags = computed(() => {
  return selectedTagList.value.some(selected => selected)
})

const hasActiveFilters = computed(() => {
  return selectedCategory.value !== 'all' || hasSelectedTags.value || searchParams.searchText
})

// 工具函数
const formatNumber = (num: number) => {
  if (num >= 1000) {
    return (num / 1000).toFixed(1) + 'K'
  }
  return num.toString()
}

// 分页相关
const onPageSizeChange = (current: number, size: number) => {
  searchParams.current = current
  searchParams.pageSize = size
  fetchData()
}

// 视图模式控制
const setViewMode = (mode: string) => {
  viewMode.value = mode
}

// 搜索相关

const searchByTag = (tag: string) => {
  searchParams.searchText = tag
  doSearch()
}

// 分类筛选
const selectCategory = (category: string) => {
  selectedCategory.value = category
  doSearch()
}

// 标签筛选
const toggleTag = (index: number) => {
  selectedTagList.value[index] = !selectedTagList.value[index]
  doSearch()
}

const clearTags = () => {
  selectedTagList.value = selectedTagList.value.map(() => false)
  doSearch()
}

// 导航
const goToUpload = () => {
  router.push('/add_picture')
}

/**
 * 获取标签和分类选项
 */
const getTagCategoryOptions = async () => {
  const res = await listPictureTagCategoryUsingGet()
  if (res.data.code === 0 && res.data.data) {
    tagList.value = res.data.data.tagList ?? []
    categoryList.value = res.data.data.categoryList ?? []
    // 初始化标签选择状态
    selectedTagList.value = new Array(tagList.value.length).fill(false)
  } else {
    message.error('获取标签分类列表失败，' + res.data.message)
  }
}

// 移动端手势支持
const homePageRef = ref<HTMLElement>()
const { onSwipe, onPinch } = useMobileGestures(homePageRef, {
  enableSwipe: true,
  enablePinch: false,
  direction: 'horizontal'
})

// 添加滑动手势
onSwipe('left', () => {
  // 向左滑动，可以切换到下一页或其他操作
  console.log('向左滑动')
})

onSwipe('right', () => {
  // 向右滑动，可以切换到上一页或其他操作
  console.log('向右滑动')
})

onMounted(() => {
  getTagCategoryOptions()
})
</script>

<style scoped>
.modern-homepage {
  min-height: 100vh;
  background: transparent;
}

/* 英雄区域 */
.hero-section {
  padding: 3rem 0 4rem;
  text-align: center;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.05), rgba(59, 130, 246, 0.05));
  border-radius: 20px;
  margin-bottom: 3rem;
  position: relative;
  overflow: hidden;
}

.hero-section::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(14, 165, 233, 0.1) 0%, transparent 70%);
  animation: heroGlow 15s linear infinite;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 2rem;
}

.hero-title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  margin: 0 0 1rem 0;
  line-height: 1.2;
}

.hero-subtitle {
  font-size: 1.25rem;
  color: var(--text-secondary);
  margin: 0 0 3rem 0;
  line-height: 1.6;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* 搜索容器 */
.search-container {
  max-width: 600px;
  margin: 0 auto 2rem;
  position: relative;
}

.search-box {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50px;
  padding: 0.5rem;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .search-box {
  background: rgba(31, 41, 55, 0.9);
  border: 2px solid rgba(75, 85, 99, 0.3);
}

.search-box:hover {
  border-color: rgba(14, 165, 233, 0.5);
  box-shadow: 0 15px 50px rgba(14, 165, 233, 0.2);
}

.search-box:focus-within {
  border-color: #0ea5e9;
  box-shadow: 0 15px 50px rgba(14, 165, 233, 0.3);
}

.search-input-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  position: relative;
}

.search-icon {
  color: var(--text-muted);
  font-size: 1.125rem;
  margin-right: 1rem;
  transition: color 0.3s ease;
}

.search-box:focus-within .search-icon {
  color: #0ea5e9;
}

.search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 1rem;
  color: var(--text-primary);
  font-weight: 500;
}

.search-input::placeholder {
  color: var(--text-muted);
}

.search-loading {
  margin-left: 1rem;
  color: #0ea5e9;
}

.loading-icon {
  animation: spin 1s linear infinite;
}

.search-btn {
  background: linear-gradient(135deg, #0ea5e9, #3b82f6);
  color: white;
  border: none;
  border-radius: 40px;
  padding: 0.875rem 2rem;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(14, 165, 233, 0.3);
}

.search-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(14, 165, 233, 0.4);
}

.search-btn:active {
  transform: translateY(0);
}

/* 搜索建议 */
.search-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  margin-top: 0.5rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

[data-theme="dark"] .search-suggestions {
  background: rgba(31, 41, 55, 0.95);
  border: 1px solid rgba(75, 85, 99, 0.3);
}

.suggestion-item {
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: background 0.2s ease;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.suggestion-item:last-child {
  border-bottom: none;
}

.suggestion-item:hover {
  background: rgba(14, 165, 233, 0.1);
}

/* 快速筛选 */
.quick-filters {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.filter-label {
  color: var(--text-secondary);
  font-weight: 500;
}

.filter-tags {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.hot-tag {
  padding: 0.5rem 1rem;
  background: rgba(14, 165, 233, 0.1);
  color: #0ea5e9;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid rgba(14, 165, 233, 0.2);
}

.hot-tag:hover {
  background: rgba(14, 165, 233, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(14, 165, 233, 0.2);
}

/* 筛选区域 */
.filter-section {
  margin-bottom: 3rem;
}

.filter-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 1rem;
}

.filter-title .anticon {
  color: #0ea5e9;
}

.clear-tags {
  margin-left: auto;
  background: none;
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #ef4444;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.clear-tags:hover {
  background: rgba(239, 68, 68, 0.1);
}

/* 分类筛选 */
.category-filter {
  margin-bottom: 2rem;
}

.category-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.category-tab {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

[data-theme="dark"] .category-tab {
  background: rgba(31, 41, 55, 0.6);
  border: 2px solid rgba(75, 85, 99, 0.3);
}

.category-tab:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  border-color: rgba(14, 165, 233, 0.3);
}

.category-tab.active {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.15), rgba(59, 130, 246, 0.15));
  border-color: #0ea5e9;
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(14, 165, 233, 0.2);
}

.category-icon {
  font-size: 1.25rem;
  color: #0ea5e9;
}

.category-label {
  flex: 1;
  font-weight: 500;
  color: var(--text-primary);
}

.category-count {
  background: rgba(14, 165, 233, 0.1);
  color: #0ea5e9;
  padding: 0.25rem 0.5rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
}

/* 标签云 */
.tag-filter {
  margin-bottom: 2rem;
}

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.tag-item {
  position: relative;
  padding: 0.625rem 1.25rem;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  overflow: hidden;
}

[data-theme="dark"] .tag-item {
  background: rgba(31, 41, 55, 0.6);
  border: 1px solid rgba(75, 85, 99, 0.3);
}

.tag-item.size-large {
  font-size: 1rem;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
}

.tag-item.size-medium {
  font-size: 0.9rem;
  font-weight: 500;
}

.tag-item.size-small {
  font-size: 0.8rem;
  padding: 0.5rem 1rem;
}

.tag-item:hover {
  transform: translateY(-2px) scale(1.05);
  border-color: rgba(14, 165, 233, 0.5);
  box-shadow: 0 8px 25px rgba(14, 165, 233, 0.2);
}

.tag-item.selected {
  background: linear-gradient(135deg, #0ea5e9, #3b82f6);
  color: white;
  border-color: #0ea5e9;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(14, 165, 233, 0.3);
}

.tag-text {
  position: relative;
  z-index: 2;
}

.tag-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.2), rgba(59, 130, 246, 0.2));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.tag-item:hover .tag-glow {
  opacity: 1;
}

/* 统计信息 */
.stats-section {
  margin-bottom: 3rem;
}

.stats-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 强制4列，保持一行 */
  gap: 1rem;
  max-width: 800px; /* 增加最大宽度以容纳4个项目 */
  margin: 0 auto;
}

.stat-item {
  text-align: center;
  padding: 1.5rem 1rem;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  transition: all 0.3s ease;
}

[data-theme="dark"] .stat-item {
  background: rgba(31, 41, 55, 0.6);
  border: 1px solid rgba(75, 85, 99, 0.3);
}

.stat-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.stat-number {
  font-size: 2rem;
  font-weight: 700;
  color: #0ea5e9;
  margin-bottom: 0.5rem;
}

.stat-label {
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
}

/* 内容区域 */
.content-section {
  margin-bottom: 3rem;
}

.content-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
}

.content-title {
  position: relative;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.title-decoration {
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, #0ea5e9, #3b82f6);
  border-radius: 2px;
}

.view-controls {
  display: flex;
  gap: 0.5rem;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
  padding: 0.25rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

[data-theme="dark"] .view-controls {
  background: rgba(31, 41, 55, 0.6);
  border: 1px solid rgba(75, 85, 99, 0.3);
}

.view-btn {
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.view-btn:hover {
  background: rgba(14, 165, 233, 0.1);
  color: #0ea5e9;
}

.view-btn.active {
  background: #0ea5e9;
  color: white;
  box-shadow: 0 2px 8px rgba(14, 165, 233, 0.3);
}

/* 加载状态 */
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
}

.loading-content {
  text-align: center;
}

.loading-spinner {
  width: 60px;
  height: 60px;
  border: 4px solid rgba(14, 165, 233, 0.1);
  border-top: 4px solid #0ea5e9;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 1rem;
}

.loading-text {
  color: var(--text-secondary);
  font-size: 1rem;
  margin: 0;
}

/* 分页 */
.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 3rem;
  margin-bottom: 4rem; /* 增加底部间距，避免被footer覆盖 */
  position: relative;
  z-index: 10; /* 确保分页组件在footer之上 */
}

/* 分页组件黑色模式样式 */
[data-theme="dark"] .pagination-container :deep(.ant-pagination) {
  color: #e5e7eb;
}

[data-theme="dark"] .pagination-container :deep(.ant-pagination .ant-pagination-item) {
  background: rgba(55, 65, 81, 0.8);
  border-color: rgba(75, 85, 99, 0.5);
  color: #e5e7eb;
}

[data-theme="dark"] .pagination-container :deep(.ant-pagination .ant-pagination-item:hover) {
  background: rgba(75, 85, 99, 0.8);
  border-color: rgba(107, 114, 128, 0.7);
  color: #f3f4f6;
}

[data-theme="dark"] .pagination-container :deep(.ant-pagination .ant-pagination-item-active) {
  background: #3b82f6;
  border-color: #3b82f6;
  color: white;
}

[data-theme="dark"] .pagination-container :deep(.ant-pagination .ant-pagination-prev),
[data-theme="dark"] .pagination-container :deep(.ant-pagination .ant-pagination-next) {
  background: rgba(55, 65, 81, 0.8);
  border-color: rgba(75, 85, 99, 0.5);
  color: #e5e7eb;
}

[data-theme="dark"] .pagination-container :deep(.ant-pagination .ant-pagination-prev:hover),
[data-theme="dark"] .pagination-container :deep(.ant-pagination .ant-pagination-next:hover) {
  background: rgba(75, 85, 99, 0.8);
  border-color: rgba(107, 114, 128, 0.7);
  color: #f3f4f6;
}

[data-theme="dark"] .pagination-container :deep(.ant-pagination .ant-pagination-options) {
  color: #e5e7eb;
}

[data-theme="dark"] .pagination-container :deep(.ant-pagination .ant-pagination-options .ant-select) {
  color: #e5e7eb;
}

[data-theme="dark"] .pagination-container :deep(.ant-pagination .ant-pagination-options .ant-select .ant-select-selector) {
  background: rgba(55, 65, 81, 0.8);
  border-color: rgba(75, 85, 99, 0.5);
  color: #e5e7eb;
}

[data-theme="dark"] .pagination-container :deep(.ant-pagination .ant-pagination-options .ant-select .ant-select-selector:hover) {
  border-color: rgba(107, 114, 128, 0.7);
}

[data-theme="dark"] .pagination-container :deep(.ant-pagination .ant-pagination-options .ant-pagination-options-quick-jumper) {
  color: #e5e7eb;
}

[data-theme="dark"] .pagination-container :deep(.ant-pagination .ant-pagination-options .ant-pagination-options-quick-jumper input) {
  background: rgba(55, 65, 81, 0.8);
  border-color: rgba(75, 85, 99, 0.5);
  color: #e5e7eb;
}

[data-theme="dark"] .pagination-container :deep(.ant-pagination .ant-pagination-options .ant-pagination-options-quick-jumper input:hover) {
  border-color: rgba(107, 114, 128, 0.7);
}

[data-theme="dark"] .pagination-container :deep(.ant-pagination .ant-pagination-options .ant-pagination-options-quick-jumper input:focus) {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

/* 空状态 */
.empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
}

.empty-content {
  text-align: center;
  max-width: 400px;
}

.empty-icon {
  font-size: 4rem;
  color: var(--text-muted);
  margin-bottom: 1rem;
}

.empty-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.5rem 0;
}

.empty-text {
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.6;
}

.upload-link {
  color: #0ea5e9;
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.3s ease;
}

.upload-link:hover {
  color: #0284c7;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .hero-content {
    padding: 0 1.5rem;
  }
  
  .category-tabs {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
  
}

/* 统计项响应式设计 */
@media (max-width: 640px) {
  .stats-container {
    grid-template-columns: repeat(2, 1fr); /* 小屏幕时2x2布局 */
    gap: 0.75rem;
    max-width: 100%;
  }
  
  .stat-item {
    padding: 1rem 0.75rem;
  }
  
  .stat-number {
    font-size: 1.5rem !important;
  }
  
  .stat-label {
    font-size: 0.8rem !important;
  }
}

@media (max-width: 480px) {
  .stats-container {
    grid-template-columns: repeat(4, 1fr); /* 超小屏幕保持4列但更紧凑 */
    gap: 0.5rem;
  }
  
  .stat-item {
    padding: 0.75rem 0.25rem;
  }
  
  .stat-number {
    font-size: 1.25rem !important;
  }
  
  .stat-label {
    font-size: 0.7rem !important;
  }
}

@media (max-width: 768px) {
  .hero-section {
    padding: 2rem 0 3rem;
    margin-bottom: 2rem;
  }
  
  .hero-content {
    padding: 0 1rem;
  }
  
  .hero-title {
    font-size: 2.5rem;
  }
  
  .hero-subtitle {
    font-size: 1.125rem;
    margin-bottom: 2rem;
  }
  
  .search-container {
    margin-bottom: 1.5rem;
  }
  
  .quick-filters {
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .category-tabs {
    grid-template-columns: 1fr;
  }
  
  .content-header {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }
  
  /* stats-container 样式已在上面的响应式规则中定义 */
}

@media (max-width: 640px) {
  .filter-tags {
    justify-content: center;
  }
  
  .tag-cloud {
    justify-content: center;
  }
  
  /* stats-container 样式已在上面定义 */
  
  .search-box {
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    border-radius: 20px;
  }
  
  .search-btn {
    width: 100%;
    border-radius: 12px;
  }
}

/* 动画关键帧 */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes heroGlow {
  0%, 100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
}

/* 首页图片列表样式 */
.homepage-picture-list {
  width: 100%;
}
</style>
